<!--分类下商家列表页面-->
<template>
  <!--顶部-->
  <van-sticky>
    <div class="wrapper">
      <div class="position">
        <span class="iconfont position-back" @click="$router.push('/')"
          >&#xeb15;</span
        >
      </div>
      <!--搜索-->
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
        shape="round"
        background="#ffd000"
        @click="onSearch"
      />
    </div>
  </van-sticky>
  <!--商家列表-->
  <div class="content">
    <div v-for="item in storeList" class="content-header" :key="item.storeId">
      <div class="logo">
        <div v-if="!item.imgUrl">
              <img :src="getHeadImageUrl(item.storeIcon)" alt=""/></div>
        <!-- <img :src="item.storeIcon" /> -->
      </div>
      
      <div class="title">
        <span class="content-content_title">{{ item.storeName }}</span>
      </div>
      <div class="dec">
        <span class="grade" >❤4.5</span>
        <span class="dis">755m</span>
      </div>
      <div class="desc">
        <span class="greenborder">好吃好吃</span>
        <span class="blueborder">宁夏大学</span>
      </div>
    </div>
    <!--底部-->
    <div style="margin-top: 40px">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o" @click="$router.push('/')"
          >首页</van-tabbar-item
        >
        <van-tabbar-item icon="search" @click="$router.push('/search')"
          >搜索</van-tabbar-item
        >
        <van-tabbar-item icon="bill" @click="$router.push('/order')"
          >订单</van-tabbar-item
        >
        <van-tabbar-item icon="manager-o" @click="$router.push('/user')"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/request.js";
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getHeadImageUrl } from '@/utils/api.js'
const router = useRouter();

// const categoryId = this.$router.params.categoryId
//↑setup中没有访问this，需要使用useRoute函数替代↓
const route = useRoute();
//拿到传来的categoryId
const categoryId = route.params.categoryId;

const storeList = reactive([]);

const getStoreList = function () {
  http
    .get(
      "/store/categoryshop/" + categoryId //将取到的categoryId与路径组合
    )
    .then((res) => {
      console.log("获取到的商家列表", res.data);
      storeList.splice(0);
      res.data.data.forEach((store) => {
        storeList.push(store);
      });
    });
};

//调用获取商家列表的方法
getStoreList();
</script>


  
  <style scoped lang="scss">
@import "../style/mixins.scss";
@import "../style/viriables.scss";

/*顶部导航栏 */
.wrapper {
  position: absolute;
  left: 0%;
  top: 0;
  right: 0;
  bottom: 50px;
  padding: 0 10px;
  background: #ffd000;
  height: 110px;
  .position {
    position: relative;
    padding: 16px 24px 16px;
    line-height: 22px;
    font-size: 16px;
    color: $content-fontcolor;
    //引入
    @include ellipse;
    &-back {
      position: relative;
      top: 1px;
      font-size: 20px;
    }
  }
}
/*搜索栏 */
.search {
  margin-bottom: 12px;
  line-height: 32px;
  background: #f5f5f5;
  color: #b7b7b7;
  .iconfont {
    display: inline-block;
    padding: 0 8px 0 14px;
    font-size: 16px;
  }
  &-text {
    display: inline-block;
    font-size: 14px;
  }
}

.content {
  margin-top: 110px;
  height: fit-content;
  overflow-y: scroll;
  &-header {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    padding: 15px;
    position: relative;
    .logo {
      width: 82px;
      height: 61px;
      img {
        width: 82px;
        height: 61px;
      }
    }
    .image {
      width: 35px;
      height: 20px;
      position: absolute;
      top: 15px;
      left: 102px;
      img {
        width: 30px;
        height: 20px;
      }
    }
    .title {
      width: 200px;
      font-size: 16px;
      color: #000;
      position: absolute;
      top: 15px;
      left: 115px;
      font-size: 20px;
    }
    .dec {
      width: 260px;
      height: 16px;
      position: absolute;
      top: 20px;
      left: 200px;
      .grade{
                margin-left: 50px ;
                font-size: 14px;
                color: #FF8000;
                font-weight: 600;
                position: absolute;
                display: inline-block;
            }
            .dis{
                margin-left:120px ;
                font-size: 12px;
                color: #333;
                font-weight: 600;
                position: absolute;
                display: inline-block;
            }
    }
    .desc {
      width: 200px;
      height: 20px;
      position: absolute;
      top: 55px;
      left: 85px;
      .greenborder {
        margin-left: 30px;
        border: 1px solid rgb(25, 93, 18);
        color: rgb(25, 93, 18);
        font-size: 16px;
      }
      .blueborder {
        margin-left: 10px;
        border: 1px solid rgb(39, 37, 175);
        color: rgb(39, 37, 175);
        font-size: 16px;
      }
    }
  }
}
</style>